<template>
  <layout-content
    v-loading="uiState.loading"
    :header="$t('commons.form.detail')"
    :back-to="{ name: 'Deployments' }"
  >
    <div v-if="!query.yamlShow && deploymentDetails">
      <el-row :gutter="20" class="row-box">
        <el-col :span="12">
          <el-card class="el-card">
            <ko-detail-basic
              v-model:yaml-show="query.yamlShow"
              :item="deploymentDetails"
            />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card v-if="deploymentDetails?.status" class="el-card">
            <h3>{{ $t("business.common.conditions") }}</h3>
            <ko-detail-conditions
              :conditions="deploymentDetails.status.conditions"
            />
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px" class="row-box">
        <el-col :span="12">
          <el-card class="el-card">
            <ko-detail-service
              :cluster="query.cluster"
              :namespace="query.namespace"
              :name="query.name"
              resourceType="Deployment"
            />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="el-card">
            <ko-detail-ingress
              :cluster="query.cluster"
              :namespace="query.namespace"
              :name="query.name"
              resourceType="Deployment"
            />
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px" class="row-box">
        <el-col :span="8">
          <el-card class="el-card">
            <ko-detail-pause
              :cluster="query.cluster"
              :yamlInfo="deploymentDetails"
              resourceType="deployments"
              @refresh="loadDeploymentDetails()"
            />
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="el-card">
            <ko-detail-update
              v-model:yaml-info="deploymentDetails"
              :cluster="query.cluster"
              resource-type="deployments"
              @refresh="loadDeploymentDetails()"
            />
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="el-card">
            <ko-detail-image
              v-model:yaml-info="deploymentDetails"
              :cluster="query.cluster"
              resourceType="deployments"
              @refresh="loadDeploymentDetails()"
            />
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px" class="row-box">
        <el-card class="el-card">
          <h3>Pods</h3>
          <ko-detail-pods
            :cluster="query.cluster"
            :namespace="query.namespace"
            :selector="deploymentDetails.spec?.selector?.matchLabels"
          />
        </el-card>
      </el-row>
      <el-row style="margin-top: 20px" class="row-box">
        <el-card class="el-card">
          <h3>History</h3>
          <Ko-detail-replicasets
            :cluster="query.cluster"
            :namespace="query.namespace"
            :name="query.name"
            :selector="deploymentDetails.spec?.selector?.matchLabels"
          />
        </el-card>
      </el-row>
    </div>
    <div v-else-if="query.yamlShow">
      <yaml-editor :value="deploymentDetails" :read-only="true" />
      <div class="bottom-button">
        <el-button @click="query.yamlShow = !query.yamlShow">
          {{ $t("commons.button.back_detail") }}
        </el-button>
      </div>
    </div>
    <div v-else v-loading="true" class="w-full h-full" />
  </layout-content>
</template>

<script setup lang="ts">
import LayoutContent from "@/views/domain/kubeHud/views/components/layout/LayoutContent.vue";
import YamlEditor from "@/views/domain/kubeHud/views/components/yaml-editor/index.vue";
import KoDetailConditions from "@/views/domain/kubeHud/views/components/detail/detail-conditions.vue";
import KoDetailBasic from "@/views/domain/kubeHud/views/components/detail/detail-basic.vue";
import KoDetailPods from "@/views/domain/kubeHud/views/components/detail/detail-pods.vue";
import KoDetailService from "@/views/domain/kubeHud/views/components/detail/detail-service.vue";
import KoDetailIngress from "@/views/domain/kubeHud/views/components/detail/detail-ingress.vue";
import KoDetailPause from "@/views/domain/kubeHud/views/components/detail/detail-pause.vue";
import KoDetailUpdate from "@/views/domain/kubeHud/views/components/detail/detail-update.vue";
import KoDetailImage from "@/views/domain/kubeHud/views/components/detail/detail-image.vue";
import KoDetailReplicasets from "@/views/domain/kubeHud/views/components/detail/detail-replicasets.vue";
import { useVerifyRouter } from "@/router/use";
import { useI18n } from "vue-i18n";
import { onMounted, reactive, ref } from "vue";
import { Deployment, useK8SApi } from "@/views/domain/kubeHud/api/k8s";
// import { getWorkLoadByName } from "@/api/workloads";

const { t } = useI18n();
const router = useVerifyRouter();
const { deploymentRepo } = useK8SApi();

const query = reactive({
  cluster: "",
  namespace: "",
  name: "",
  yamlShow: false
});

const uiState = reactive({
  loading: false
});

const deploymentDetails = ref<Deployment>();

const loadDeploymentDetails = () => {
  deploymentRepo
    .getDeploymentDetail({
      clusterName: query.cluster,
      namespace: query.namespace,
      name: query.name
    })
    .then(res => {
      deploymentDetails.value = res;
    });
};

onMounted(() => {
  router.validate(["namespace", "name"]).then(() => {
    const routeQuery = router.query;
    query.cluster = routeQuery.cluster as string;
    query.namespace = routeQuery.namespace as string;
    query.name = routeQuery.name as string;
    query.yamlShow = routeQuery.yamlShow === "true";

    loadDeploymentDetails();
  });
});
</script>

<style scoped>
.row-box {
  width: 100%;

  .el-card {
    width: 100%;
    height: 100%;
  }
}
</style>
